<template>
    <div class="main">
        <div class="main_header">
          <h2 style="margin-left: 20px;">控制面板</h2>
          <ul class="main_header_tag">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <ul class="main_header_title">
            <li><i class="el-icon-discount"></i> 首页</li>
            <li>/  控制面板</li>
          </ul>
        </div>
        <div class="main_message">
          <ul>
            <li>
              <router-link to="/">
                <p class="li_state">未签到</p>
                <p class="li_pic"><i class="el-icon-alarm-clock"></i></p>
                <p class="li_click">点击<i class="el-icon-thumb"></i>签到</p>
                <p class="li_more">更多 <i class="el-icon-caret-right"></i></p>
              </router-link>
            </li>
            <li>
              <router-link to="/">
              <p class="li_state_msg">0</p>
              <p class="li_pic_msg"><i class="el-icon-folder-opened"></i></p>
              <p class="li_click_msg">文档管理</p>
              <p class="li_more_msg">更多 <i class="el-icon-caret-right"></i></p>
              </router-link>
            </li>
            <li>
              <router-link to="/">
              <p class="li_state_book">10</p>
              <p class="li_pic_book"><i class="el-icon-phone"></i></p>
              <p class="li_click_book">通讯录</p>
              <p class="li_more_book">更多 <i class="el-icon-caret-right"></i></p>
              </router-link>
            </li>
            <li>
              <router-link to="/">
              <p class="li_state_discuss">23</p>
              <p class="li_pic_discuss"><i class="el-icon-folder-opened"></i></p>
              <p class="li_click_discuss">讨论区</p>
              <p class="li_more_discuss">更多 <i class="el-icon-caret-right"></i></p>
              </router-link>
            </li>
          </ul>
        </div>
        <div class="main_notice">
          <div class="main_notice_header">
            <h2>公告通知</h2>
            <ul>
              <li><i class="el-icon-close"></i></li>
              <li><i class="el-icon-minus"></i></li>
              <li><router-link to="/" style="color:white;"><i class="el-icon-s-unfold"></i></router-link></li>
            </ul>
            <div class="main_notice_msg">  
            <el-table
              :data="tableData"
              stripe
              style="width: 100%"
              :pagination="{ pageSize: 6 }">
                <el-table-column
                  prop="release"
                  label="发布"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="date"
                  label="日期"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="state"
                  label="状态"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="title"
                  label="标题"
                  width="120">
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="30px"
                      @click="handleSearch(scope.$index, scope.row)">查看</el-button>
                  </template>
                </el-table-column>
            </el-table>
            </div>
          </div>
        </div>
        <div class="main_calendar">
          <p><i class="el-icon-s-claim"></i>行事历</p>
            <ul>
              <li><i class="el-icon-close"></i></li>
              <li><i class="el-icon-minus"></i></li>
              <li><i class="el-icon-s-unfold"></i></li>
            </ul>
          <div class="main_calendar_msg">
             <el-calendar v-model="valuedate" class="dateTable"></el-calendar>
          </div>
        </div>
    </div>
</template>

<script>

export default ({
    name: 'HomePageIndex',
    data(){
        return{
          tableData:[
            {
              release:'Tom',
              date:'2023-3-30',
              state:'正常',
              title:'升职加薪',
            },
            {
              release:'Tom',
              date:'2023-3-30',
              state:'正常',
              title:'升职加薪',
            },
            {
              release:'Tom',
              date:'2023-3-30',
              state:'正常',
              title:'升职加薪',
            },
            {
              release:'Tom',
              date:'2023-3-30',
              state:'正常',
              title:'升职加薪',
            },
            {
              release:'Tom',
              date:'2023-3-30',
              state:'正常',
              title:'升职加薪',
            },
            {
              release:'Tom',
              date:'2023-3-30',
              state:'正常',
              title:'升职加薪',
            },
            
          ],
          valuedate: new Date(),
          options: [],
          value: [],
          list: [],
          loading: false,
          states: [
            "登录","注册","上传","下载"
          ]
      }
    },
    methods: {
      handleSearch(row) {
        console.log(row);
      }
    },
    mounted(){
      
    }
})
</script>

<style scoped>
*{
    margin: 0px;
    padding: 0px;
}
.main{
    position: absolute;
    top: 0px;
    left: 0px;
}
.main_header{
  width: 1274px;
  height: 60px;
  line-height: 60px;
  /* background-color: rgb(241, 162, 162); */
}
.main_header ul{
  list-style: none;
}
.main_header .main_header_tag li{
  width: 20px;
  height: 20px;
  position: relative;
  /* background-color: #ff4b1c; */
  border-radius: 50%;
} 
.main_header .main_header_tag li:nth-child(1){
  top: -38px;
  left: 140px;
  background-color:#00c0ff;
}
.main_header .main_header_tag li:nth-child(2){
  top: -58px;
  left: 175px;
  background-color: #00a679;
}
.main_header .main_header_tag li:nth-child(3){
  top: -78px;
  left: 210px;
  background-color: #fe9c00;
}
.main_header .main_header_tag li:nth-child(4){
  top: -98px;
  left: 245px;
  background-color: #ff4b1c;
}
.main_header .main_header_title li{
  position: relative;
  height: 50px;
  line-height: 50px;
  /* background-color: chartreuse; */
}
.main_header .main_header_title li:nth-child(1){
  top: -135px;
  left: 1110px;
  width: 60px;
  color: #00c0ff;
  font-weight: bold;
}
.main_header .main_header_title li:nth-child(2){
  top: -185px;
  left: 1170px;
  width: 80px;
  font-weight: bold;
  color: gray;
}
.main_message{
  width: 1274px;
  height: 180px;
  margin-top: -16px;
  /* background-color: rgb(168, 224, 151); */
}
.main_message ul{
  list-style: none;
  width: 1274px;
  height: 180px;
  /* background-color: brown; */
}
.main_message ul li{
  float: left;
  width: 300px;
  height: 150px;
  line-height: 150px;
  margin-top: 12px;
  margin-left: 13px;
}
.main_message ul li:nth-child(1){
  border-radius: 10px;
  background-color: #00c0ff;
}
.li_state{
  float: left;
  width: 100px;
  height: 50px;
  line-height: 50px;
  font-size: 30px;
  color: rgb(238, 238, 238);
  margin-top: 30px;
  text-align: center;
  /* background-color: greenyellow; */
}
.li_pic{
  float: left;
  width: 80px;
  font-size: 90px;
  height: 80px;
  line-height: 80px;
  margin-top: 15px;
  margin-left: 20px;
  color: white;
  opacity: 0.5;
  /* background-color: greenyellow; */
}
.li_click{
  float: left;
  width: 90px;
  height: 50px;
  color: white;
  line-height: 50px;
  margin-left: -190px;
  margin-top: 70px;
  /* background-color: greenyellow; */
}
.li_more{
  float: right;
  width: 300px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: white;
  margin-top: 25px;
  border-radius: 20px;
  background-color: rgba(139, 138, 138,0.3);
}
.li_more:hover{
  background-color: rgba(139, 138, 138,0.6);
}
.main_message ul li:nth-child(2){
  border-radius: 10px;
  background-color: #00a679;
}
.li_state_msg{
  float: left;
  width: 100px;
  height: 50px;
  line-height: 50px;
  font-size: 30px;
  color: rgb(238, 238, 238);
  margin-top: 30px;
  text-align: center;
}
.li_pic_msg{
  float: left;
  width: 80px;
  font-size: 90px;
  height: 80px;
  line-height: 80px;
  margin-top: 15px;
  margin-left: 20px;
  color: white;
  opacity: 0.5;
}
.li_click_msg{
  float: left;
  width: 90px;
  height: 50px;
  line-height: 50px;
  color: white;
  margin-left: -180px;
  margin-top: 70px;
}
.li_more_msg{
  float: right;
  width: 300px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: white;
  margin-top: 24px;
  border-radius: 20px;
  background-color: rgba(139, 138, 138,0.3);
}
.li_more_msg:hover{
  background-color: rgba(139, 138, 138,0.6);
}
.main_message ul li:nth-child(3){
  border-radius: 10px;
  background-color: #fe9c00;
}
.li_state_book{
  float: left;
  width: 100px;
  height: 50px;
  line-height: 50px;
  font-size: 30px;
  color: rgb(238, 238, 238);
  margin-top: 30px;
  text-align: center;
}
.li_pic_book{
  float: left;
  width: 80px;
  font-size: 90px;
  height: 80px;
  line-height: 80px;
  margin-top: 15px;
  margin-left: 20px;
  color: white;
  opacity: 0.5;
}
.li_click_book{
  float: left;
  width: 90px;
  height: 50px;
  line-height: 50px;
  color: white;
  margin-left: -170px;
  margin-top: 70px;
}
.li_more_book{
  float: right;
  width: 300px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: white;
  margin-top: 24px;
  border-radius: 20px;
  background-color: rgba(139, 138, 138,0.3);
}
.li_more_book:hover{
  background-color: rgba(139, 138, 138,0.6);
}
.li_more_discuss:hover{
  background-color: rgba(139, 138, 138,0.6);  
}
.main_message ul li:nth-child(4){
  border-radius: 10px;
  background-color: #ff4b1c;
}
.li_state_discuss{
  float: left;
  width: 100px;
  height: 50px;
  line-height: 50px;
  font-size: 30px;
  color: rgb(238, 238, 238);
  margin-top: 30px;
  text-align: center;
}
.li_pic_discuss{
  float: left;
  width: 80px;
  font-size: 90px;
  height: 80px;
  line-height: 80px;
  margin-top: 15px;
  margin-left: 20px;
  color: white;
  opacity: 0.5;
}
.li_click_discuss{
  float: left;
  width: 90px;
  height: 50px;
  line-height: 50px;
  color: white;
  margin-left: -170px;
  margin-top: 70px;
}
.li_more_discuss{
  float: right;
  width: 300px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: white;
  margin-top: 24px;
  border-radius: 20px;
  background-color: rgba(139, 138, 138,0.3);
}
.main_notice{
  width: 700px;
  height: 450px;
  display: inline-block;
  border: 2px rgb(185, 185, 185) solid;
  border-top: 5px rgb(28, 209, 233) solid;
  /* background-color: gray; */
  position: relative;
  top: -50px;
  left: 10px;
  border-radius: 10px;
}
.main_notice_header{
  width: 700px;
  height: 50px;
  /* background-color: burlywood; */
}
.main_notice_header h2{
  height: 50px;
  line-height: 50px;
  margin-left: 10px;
}
.main_notice_header ul{
  list-style: none;
}
.main_notice_header ul li{
  width: 40px;
  height: 40px;
  line-height: 40px;
  float: right;
  border-radius: 5px;
  background-color: #207ac3;
}
.main_notice_header ul li:nth-child(1){
  margin-top: -40px;
  margin-right: 10px;
  color: white;
  font-size: 25px;
  text-align: center;
}
.main_notice_header ul li:nth-child(2){
  margin-top: -40px;
  margin-right: 60px;
  color: white;
  font-size: 25px;
  text-align: center;
}
.main_notice_header ul li:nth-child(3){
  margin-top: -40px;
  margin-right: 110px;
  color: white;
  font-size: 25px;
  text-align: center;
}
.main_notice_msg{
  width: 650px;
  height: 380px;
  float: left;
  margin-left: 20px;
  margin-top: 20px;
  border-radius: 10px;
}
.main_calendar{
  display: inline-block;
  width: 500px;
  height: 455px;
  background-color: #00c891;
  position: relative;
  top: 5px;
  left: 40px;
  border: 1px solid gray;
  border-radius: 10px;
}
.main_calendar p{
  width: 490px;
  height: 60px;
  line-height: 60px;
  font-size: 22px;
  /* background-color: #00c891; */
  border-radius: 10px;
  color: white;
  padding-left: 10px;
  border-bottom: 1px solid white;
}
.main_calendar ul{
  list-style: none;
}
.main_calendar ul li{
  width: 40px;
  height: 40px;
  line-height: 40px;
  float: right;
  border-radius: 5px;
  background-color: #00e8c3;
}
.main_calendar ul li:nth-child(1){
  margin-top: -50px;
  margin-right: 10px;
  color: white;
  font-size: 25px;
  text-align: center;
}
.main_calendar ul li:nth-child(2){
  margin-top: -50px;
  margin-right: 60px;
  color: white;
  font-size: 25px;
  text-align: center;
}
.main_calendar ul li:nth-child(3){
  margin-top: -50px;
  margin-right: 110px;
  color: white;
  font-size: 25px;
  text-align: center;
}

.main_calendar_msg{
  width: 480px;
  height: 380px;
  position: relative;
  top: 5px;
  left: 11px;
  border-radius: 10px;
  /* background-color: wheat; */
}
.dateTable{
  position: relative;
  border-radius: 10px;
  background-color: #00c891;
}
/deep/ .el-calendar-table .el-calendar-day {
    box-sizing: border-box;
    padding: 8px;
    height: 39px;
}

</style>